import React, {
  useState,
  useImperativeHandle,
  forwardRef,
  useEffect,
} from "react";
import { Card, Form, message, Radio, InputNumber, Spin } from "antd";
import Https from "@/utils/Https";
import styles from "./index.less";
import { signList, codeList } from "./interface";
const LeagueClass = forwardRef((props, ref) => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  let customValue = Form.useWatch((values) => values, form);
  const [formInfo, setFormInfo] = useState({});
  //自主签到时间
  const [SignTimeList, setSignTimeList] = useState(signList);
  //扫码签到时间
  const [codeSigninList, setCodeSigninList] = useState(codeList);
  const getDetails = async () => {
    setLoading(true);
    let res: any = await Https.get("/privateAppointSet/info", {}, true);
    if (res.code == 200 && res.data) {
      setFormInfo(res.data);
      form.setFieldsValue({ ...res.data });
      let signObj = [...SignTimeList];
      signObj.forEach((item) => {
        item.disabled = true;
        if (res.data.signinType == item.id) {
          item.disabled = false;
        }
      });
      setSignTimeList(signObj);
      let codeObj = [...codeSigninList];
      codeObj.forEach((item) => {
        item.disabled = true;
        if (res.data.codeSigninType == item.id) {
          item.disabled = false;
        }
      });
      setCodeSigninList(codeObj);
    } else {
      message.error(res.msg);
    }
    setLoading(false);
  };
  useEffect(() => {
    getDetails();
  }, []);
  useImperativeHandle(ref, () => ({
    changeVal: () => {
      form
        .validateFields()
        .then(async (values) => {
          let params = {
            ...values,
            id: formInfo.id,
          };
          setLoading(true);
          let res: any = await Https.post(
            "/privateAppointSet/addOrUpdatePrivateAppointSet",
            params,
            true
          );
          if (res.code == 200) {
            message.success("操作成功");
          } else {
            message.error(res.msg);
          }
          setLoading(false);
        })
        .catch((errorInfo) => {
          console.log(errorInfo, "-errorInfo");
        });
    },
  }));
  return (
    <Spin spinning={loading}>
      <div className={styles.PrivateCourse}>
        <Form form={form} colon={false}>
          <Card title="预约时间设置">
            <Form.Item label="预约方式" name="groupType">
              <Radio.Group>
                <Radio value="1">不支持会员自主预约</Radio>
                <Radio value="2">自主预约，不限制预约时间</Radio>
                <Radio value="3">自主预约，限制预约时间</Radio>
              </Radio.Group>
            </Form.Item>
            {customValue && customValue.groupType == "2" && (
              <Form.Item label="预约截止时间">
                课程预约人数未满，会员需早于开课前
                <Form.Item
                  label=""
                  name="groupAppointEndTime"
                  rules={[
                    {
                      required: true,
                      message: "请输入预约时间",
                    },
                  ]}
                >
                  <InputNumber
                    min={0}
                    precision={0}
                    placeholder="0为不限制"
                    controls={false}
                    suffix={"分钟"}
                  />
                </Form.Item>
                进行自主预约
              </Form.Item>
            )}
            {customValue && customValue.groupType == "3" && (
              <>
                <Form.Item label="预约开始时间">
                  开课前
                  <Form.Item
                    label=""
                    name="groupAppointStartTime"
                    rules={[
                      {
                        required: true,
                        message: "请输入预约时间",
                      },
                    ]}
                  >
                    <InputNumber
                      min={0}
                      precision={0}
                      placeholder="0为不限制"
                      controls={false}
                      suffix={"分钟"}
                    />
                  </Form.Item>
                  开始支持自主预约
                </Form.Item>
                <Form.Item label="预约截止时间">
                  课程预约人数未满，会员需早于开课前
                  <Form.Item
                    label=""
                    name="groupAppointEndTime"
                    rules={[
                      {
                        required: true,
                        message: "请输入预约时间",
                      },
                    ]}
                  >
                    <InputNumber
                      min={0}
                      precision={0}
                      placeholder="0为不限制"
                      controls={false}
                      suffix={"分钟"}
                    />
                  </Form.Item>
                  自主预约
                </Form.Item>
              </>
            )}
          </Card>
          <Card title="签到设置">
            <Form.Item label="自主签到设置" name="selfSigninFlag">
              <Radio.Group>
                <Radio value="0">启用</Radio>
                <Radio value="1">禁用</Radio>
              </Radio.Group>
            </Form.Item>
            {customValue && customValue.selfSigninFlag == "0" && (
              <Form.Item label="自主签到时间" name="signinType">
                <Radio.Group>
                  {SignTimeList &&
                    SignTimeList.length > 0 &&
                    SignTimeList.map((item, index) => {
                      return (
                        <div
                          className={`${styles.radioFlex} ${
                            item.disabled ? styles.noError : ""
                          }`}
                          key={item.id}
                        >
                          <Radio
                            value={item.id}
                            onChange={() => {
                              let objList = [...SignTimeList];
                              objList.forEach((item) => {
                                item.disabled = true;
                              });
                              form.setFieldsValue({ signinValue: "" });
                              objList[index].disabled = false;
                              setSignTimeList(objList);
                            }}
                          >
                            {item.name}
                          </Radio>
                          <Form.Item
                            label=""
                            name="signinValue"
                            rules={[
                              {
                                required: !item.disabled,
                                message: `请输入${item.name}时间`,
                              },
                            ]}
                          >
                            <InputNumber
                              min={0}
                              precision={0}
                              controls={false}
                              disabled={item.disabled}
                              suffix={"分钟"}
                            />
                          </Form.Item>
                          <Form.Item label="">以内，支持签到</Form.Item>
                        </div>
                      );
                    })}
                </Radio.Group>
              </Form.Item>
            )}
            <Form.Item label="扫码签到设置" name="codeSigninFlag">
              <Radio.Group>
                <Radio value="0">启用</Radio>
                <Radio value="1">禁用</Radio>
              </Radio.Group>
            </Form.Item>
            {customValue && customValue.codeSigninFlag == "0" && (
              <Form.Item label="扫码签到时间" name="codeSigninType">
                <Radio.Group>
                  {codeSigninList &&
                    codeSigninList.length > 0 &&
                    codeSigninList.map((item, index) => {
                      return (
                        <div
                          className={`${styles.radioFlex} ${
                            item.disabled ? styles.noError : ""
                          }`}
                          key={item.id}
                        >
                          <Radio
                            value={item.id}
                            onChange={() => {
                              let objList = [...codeSigninList];
                              objList.forEach((item) => {
                                item.disabled = true;
                              });
                              form.setFieldsValue({ codeSigninValue: "" });
                              objList[index].disabled = false;
                              setCodeSigninList(objList);
                            }}
                          >
                            {item.name}
                          </Radio>
                          <Form.Item
                            label=""
                            name="codeSigninValue"
                            rules={[
                              {
                                required: !item.disabled,
                                message: `请输入${item.name}时间`,
                              },
                            ]}
                          >
                            <InputNumber
                              min={0}
                              precision={0}
                              controls={false}
                              disabled={item.disabled}
                              suffix={"分钟"}
                            />
                          </Form.Item>
                          <Form.Item label="">以内，支持签到</Form.Item>
                        </div>
                      );
                    })}
                </Radio.Group>
              </Form.Item>
            )}
          </Card>
          <Card title="取消预约设置">
            <Form.Item label="自主取消" name="selfAppointCancelFlag">
              <Radio.Group>
                <Radio value="0">启用</Radio>
                <Radio value="1">禁用</Radio>
              </Radio.Group>
            </Form.Item>
            {customValue && customValue.selfAppointCancelFlag == "0" && (
              <Form.Item label="取消设置">
                <Radio checked>开课前</Radio>
                <Form.Item
                  label=""
                  name="selfAppointCancelBefore"
                  rules={[{ required: true, message: "请输入取消时间" }]}
                >
                  <InputNumber
                    min={0}
                    precision={0}
                    controls={false}
                    placeholder="请输入"
                    suffix="分钟"
                  />
                </Form.Item>
                <Form.Item>支持会员自主取消</Form.Item>
              </Form.Item>
            )}
          </Card>
        </Form>
      </div>
    </Spin>
  );
});
export default LeagueClass;
